<template>
  <!-- 基本信息 -->
  <div class="basicMsg">
    <FormContainer :column="3">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item prop="taskName" label="任务名称">
          <el-input v-model.trim="formData.taskName" placeholder="请输入任务名称" clearable />
        </el-form-item>
        <el-form-item prop="taskType" label="任务类型">
          <SearchSelectPicker
            url="/call-center/api/v1/callBackTask/type/page"
            placeholder="请选择任务类型"
            lable-name="typeName"
            :params="{query:{deptCode: {value:`[${groupList.map(e=>e.groupNo).join(',')}]`,operator:'in'} },type:0}"
            :value.sync="formData.taskType"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="date" label="任务执行周期">
          <el-date-picker
            v-model="formData.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item prop="questionnaireId" label="调查问卷">
          <SearchSelectPicker
            url="/call-center/api/v1/questionnaire/page"
            placeholder="请选择调查问卷"
            lable-name="title"
            :value.sync="formData.questionnaireId"
            :params="{query:{state: 1, questionnaireSort: 0},type:0}"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item v-if="type===0" prop="objectMethod" label="客户生成方式">
          <el-select v-model="formData.objectMethod" placeholder="请选择客户生成方式">
            <el-option label="导入数据" :value="0" />
            <el-option label="线上电商" :value="1" />
            <el-option label="线下门店" :value="2" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="formData.objectMethod===1&&type===0" prop="buyChannel" label="购买渠道">
          <el-select v-model="formData.buyChannel" placeholder="请选择购买渠道">
            <el-option label="门店" :value="1" />
            <el-option label="电商" :value="2" />
          </el-select>
        </el-form-item> -->
      </el-form>
    </FormContainer>
    <div class="button-container" style="padding-top:0;">
      <div class="next-button">
        <Button type="primary" :loading="loading" @click="next">下一步</Button>
      </div>
    </div>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
import {
  callBackTaskAddGetId,
  callBackTaskDetail,
  callBackTaskUpdate
} from '@/api/callBackTask'
export default {
  name: 'BasicMsg',
  components: {
    FormContainer,
    Button,
    SearchSelectPicker
  },
  props: {},
  data() {
    return {
      loading: false,
      type: 0,
      formData: {},
      formRules: {
        taskName: {
          required: true,
          message: '请输入任务名称',
          trigger: 'change'
        },
        taskType: {
          required: true,
          message: '请选择任务类型',
          trigger: 'change'
        },
        date: {
          required: true,
          message: '请选择任务执行周期',
          trigger: 'change'
        },
        questionnaireId: {
          required: true,
          message: '请选择调查问卷',
          trigger: 'change'
        },
        objectMethod: {
          required: true,
          message: '请选择客户生成方式',
          trigger: 'change'
        },
        buyChannel: {
          required: true,
          message: '请选择购买渠道',
          trigger: 'change'
        }
      }
    }
  },
  // watch:{
  //   '$route' (val, old) {
  //       if(val.name!=='CreateTask'){
  //         if(this.$route.query.id){
  //           this.setBasic({id:this.$route.query.id,data:this.formData})
  //         }else{
  //           this.setBasic({id:'newObj',data:this.formData})
  //         }
  //       }else{
  //         if(this.$route.query.id){
  //           this.formData = this.$store.state.taskForm.form[this.$route.query.id].basic
  //         }else{
  //           this.formData = this.$store.state.taskForm.form.newObj.basic
  //         }
  //       }
  //   }
  // },
  computed: {
    ...mapState({
      step: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].step : 1
      }
    }),
    ...mapGetters(['firstDept', 'groupList'])
  },
  created() {
    this.getData()
  },
  methods: {
    ...mapActions({
      setStep: 'taskForm/setStep',
      setBasic: 'taskForm/setBasic'
    }),
    ...mapMutations({
      SET_STEP: 'taskForm/SET_STEP'
    }),
    getData() {
      if (this.$route.query.id && this.$route.query.id !== 'newObj') {
        this.type = 1
        callBackTaskDetail(this.$route.query.id).then(res => {
          if (res.success === 1) {
            res.data.date = [res.data.startDate, res.data.endDate]
            res.data.step = 1
            this.formData = res.data
            this.setBasic({ id: this.$route.query.id, data: this.formData })
          }
        })
      } else {
        if (!this.formData || this.formData !== {} || this.formData !== '{}') {
          this.formData = {
            taskName: '',
            taskType: '',
            date: [],
            questionnaireId: '',
            objectMethod: '',
            buyChannel: '',
            organization: ''
          }
        }
      }
    },
    // 下一步
    next() {
      var that = this
      that.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.formData.date.length) {
            this.formData.startDate = this.formData.date[0]
            this.formData.endDate = this.formData.date[1]
          }
          if (this.$route.query.id && this.$route.query.id !== 'newObj') {
            // 修改
            callBackTaskUpdate(this.formData)
              .then(res => {
                this.loading = false
                this.setBasic({ id: this.$route.query.id, data: this.formData })
                that.SET_STEP({ id: this.$route.query.id, step: that.step + 2 })
              })
              .catch(er => {
                this.loading = false
              })
          } else {
            // 新增
            callBackTaskAddGetId(this.formData)
              .then(res => {
                this.loading = false
                this.formData.id = res.msg
                this.setBasic({ id: this.$route.query.id, data: this.formData })
                that.SET_STEP({ id: this.$route.query.id, step: that.step + 1 })
              })
              .catch(er => {
                this.loading = false
              })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
